<template>
  <div>
    <!-- 搜索 -->
    <!-- 轮播 -->
    <el-carousel height="260px">
      <el-carousel-item v-for="v in bannersData" :key="v.id">
        <img :src="v.url" alt="" style="width: 100%; height: 260px" />
      </el-carousel-item>
    </el-carousel>
    <!-- 点击横滚 -->
    <div ref="bannerDiv" style="margin: 10px 0">
      <swiper-container
        :slides-per-view="slidesPerView"
        style="height: 100px"
        :navigation="true"
        :freeMode="true"
      >
        <swiper-slide>
          <img src="/middle-banner.webp" alt="" width="192" height="88" />
        </swiper-slide>
        <swiper-slide>
          <img src="/middle-banner.webp" alt="" width="192" height="88" />
        </swiper-slide>
        <swiper-slide>
          <img src="/middle-banner.webp" alt="" width="192" height="88" />
        </swiper-slide>
        <swiper-slide>
          <img src="/middle-banner.webp" alt="" width="192" height="88" />
        </swiper-slide>
        <swiper-slide>
          <img src="/middle-banner.webp" alt="" width="192" height="88" />
        </swiper-slide>
        <swiper-slide>
          <img src="/middle-banner.webp" alt="" width="192" height="88" />
        </swiper-slide>
        <swiper-slide>
          <img src="/middle-banner.webp" alt="" width="192" height="88" />
        </swiper-slide>
        <swiper-slide>
          <img src="/middle-banner.webp" alt="" width="192" height="88" />
        </swiper-slide>
        <swiper-slide>
          <img src="/middle-banner.webp" alt="" width="192" height="88" />
        </swiper-slide>
        <swiper-slide>
          <img src="/middle-banner.webp" alt="" width="192" height="88" />
        </swiper-slide>
        <swiper-slide>
          <img src="/middle-banner.webp" alt="" width="192" height="88" />
        </swiper-slide>
        <swiper-slide>
          <img src="/middle-banner.webp" alt="" width="192" height="88" />
        </swiper-slide>
        <swiper-slide>
          <img src="/middle-banner.webp" alt="" width="192" height="88" />
        </swiper-slide>
        <swiper-slide>
          <img src="/middle-banner.webp" alt="" width="192" height="88" />
        </swiper-slide>
      </swiper-container>
    </div>
    <!-- tab + 切换 -->
    <el-skeleton
      :loading="tabBannerLoading"
      style="--el-skeleton-circle-size: 100px"
      v-for="(v, i) in tabBannerData"
      :key="i"
    >
      <TabBanner :item="v"></TabBanner>
      <template #template>
        <div>
          <div class="header">
            <el-skeleton-item variant="h1" />
          </div>
          <div class="bottom" style="display: flex">
            <div class="item" style="width: 200px; height: 304px; margin: 10px 10px 10px 0">
              <el-skeleton-item
                variant="image"
                style="width: 200px; height: 304px; margin-right: 10px"
              />
            </div>
            <div class="item" style="width: 200px; height: 304px; margin: 10px 10px 10px 0">
              <el-skeleton-item
                variant="image"
                style="width: 200px; height: 304px; margin-right: 10px"
              />
            </div>
            <div class="item" style="width: 200px; height: 304px; margin: 10px 10px 10px 0">
              <el-skeleton-item
                variant="image"
                style="width: 200px; height: 304px; margin-right: 10px"
              />
            </div>
            <div class="item" style="width: 200px; height: 304px; margin: 10px 10px 10px 0">
              <el-skeleton-item
                variant="image"
                style="width: 200px; height: 304px; margin-right: 10px"
              />
            </div>
            <div class="item" style="width: 200px; height: 304px; margin: 10px 10px 10px 0">
              <el-skeleton-item
                variant="image"
                style="width: 200px; height: 304px; margin-right: 10px"
              />
            </div>
            <div class="item" style="width: 200px; height: 304px; margin: 10px 10px 10px 0">
              <el-skeleton-item
                variant="image"
                style="width: 200px; height: 304px; margin-right: 10px"
              />
            </div>
            <div class="item" style="width: 200px; height: 304px; margin: 10px 10px 10px 0">
              <el-skeleton-item
                variant="image"
                style="width: 200px; height: 304px; margin-right: 10px"
              />
            </div>
            <div class="item" style="width: 200px; height: 304px; margin: 10px 10px 10px 0">
              <el-skeleton-item
                variant="image"
                style="width: 200px; height: 304px; margin-right: 10px"
              />
            </div>
          </div>
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { onMounted, onUnmounted, ref } from 'vue'
import { throttle } from 'lodash-es'
import TabBanner from '@/components/tabBanner/indexView.vue'
import type { TabBannerState } from '@/types'
/******************** 轮播 *************************/
interface BannerState {
  id: number
  url: string
  name: string
}
const bannersData = ref<BannerState[]>([])
const _getBnnaers = async () => {
  const resp = await axios.get('/banners')
  console.log('bannersData:', resp.data)
  bannersData.value = resp.data.data
}

_getBnnaers()

/******************** 中间横滚的个数 *************************/
const slidesPerView = ref(5)
const bannerDiv = ref<HTMLElement>()
const _initSlidesPerView = throttle(() => {
  if (bannerDiv.value) {
    slidesPerView.value = bannerDiv.value?.offsetWidth / 200
  }
}, 200)

onMounted(() => {
  _initSlidesPerView()
  window.addEventListener('resize', _initSlidesPerView)
})

onUnmounted(() => {
  window.removeEventListener('resize', _initSlidesPerView)
})
/******************** TAB + BANNER *************************/
const tabBannerData = ref<TabBannerState[]>(new Array(6).fill(''))
const tabBannerLoading = ref(true)
const _getTabBanner = async () => {
  const resp = await axios.get('/home/list')
  console.log('tabBannerData', resp.data.data)
  tabBannerData.value = resp.data.data
  tabBannerLoading.value = false
}

_getTabBanner()
</script>

<script lang="ts">
export default {
  name: 'HomeView'
}
</script>
